<template>
        <Upload ref="upload"
                name="myfile"
                :on-success="handleSuccess"
                :show-upload-list="fileCon.showUploadList"
                :format="fileCon.format"
                :max-size="fileCon.maxSize"
                :on-format-error="handleFormatError"
                :on-exceeded-size="handleMaxSize"
                :before-upload="handleBeforeUpload"
                :multiple="fileCon.multiple"
                :type="fileCon.type"
                :action="'/sysback/platimagelibrary/uploadFile?categoryUuid='+apiData.categoryUuid"
                style="display: inline-block;">
            <Button size="small" icon="ios-cloud-upload-outline">上传图片</Button>
        </Upload>
</template>
<script>
    export default {
        props: {
            fileCon: {
                type: Object
            },
            formData: {
                type: Object
            },
            apiData: {
                type: Object
            }
        },
        data () {
            return {
                defaultList: [],
                uploadList: [], // 上传文件列表
                imgUrl: '',
                visible: false
            }
        },
        watch: {
            formData (val) {
                this.defaultList = val;
                this.$set(this.$data, 'defaultList', val);
                this.$nextTick(() => {
                    this.uploadList = this.$refs.upload.fileList;
                });
            }
        },
        created () { },
        mounted () {
            this.uploadList = this.$refs.upload.fileList;
        },
        methods: {
            handleChange () {
                this.$refs.upload.clearFiles()
                this.$emit('handleChange', {});
            },
            // 预览图片
            handleView (url) {
                this.imgUrl = url;
                this.visible = true;
            },
            // 移除图片
            handleRemove (file) {
                const fileList = this.$refs.upload.fileList;
                this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
            },
            // 上传成功
            handleSuccess (res, file, fileList) {
                // file.url = 'https://dev-file.iviewui.com/userinforaP8NeQgYpmKgkpWlqZP7rfewbHiIzJY/avatar';
                // file.name = '小头像';
                this.handleChange();
            },
            // 上传出错
            handleFormatError (file) {
                let fileType = this.fileCon.format.join(',');
                this.$Notice.warning({
                    title: '图片格式不正确',
                    desc: '图片' + file.name + '格式不正确, 请选择' + fileType + '格式的图片.'
                });
            },
            // 上传最大限制
            handleMaxSize (file) {
                this.$Notice.warning({
                    title: '超出文件大小限制',
                    desc: '图片  ' + file.name + ' 太大了, 请确保图片在' + this.fileCon.maxSize + 'kb以内.'
                });
            },
            // 上传前校验
            handleBeforeUpload () {
                const check = this.uploadList.length < this.fileCon.maxLen;
                if (!check) {
                    this.$Notice.warning({
                        title: '上传图片达到最大限制.'
                    });
                }
                return check;
            }
        }
    }
</script>
<style lang="less" scoped>
.demo-upload-list {
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    margin-right: 4px;
}
.demo-upload-list img {
    width: 100%;
    height: 100%;
}
.demo-upload-list-cover {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
}
.demo-upload-list:hover .demo-upload-list-cover {
    display: block;
}
.demo-upload-list-cover i {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
}
.demo-upload-camera {
    width: 58px;
    height: 58px;
    line-height: 58px;
}
.ivu-upload-list{
	margin-top: 8px;
    position: fixed;
    bottom: 0;
    right: 0px;
    width: 300px;
    padding: 10px;
    background: #fff;
}
</style>
